import React, {useEffect, useState} from 'react';
import {Layout, Tabs} from "antd";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {useAppDispatch, useAPPTitle} from "@/hooks";
import {useSelectCommon} from "@/store/slice/common";
import type {TPanes} from '@/store/slice/common'
import {addPanes, delPanes} from "@/store/slice/common";
const {Content} = Layout
const {TabPane} = Tabs;
function IndexContent() {
    const {pathname: key} = useLocation();
    const navigate = useNavigate();
    const {subTitle: title} = useAPPTitle();
    const {panes} = useSelectCommon()
    const dispatch = useAppDispatch();
    useEffect(() => {
        const info: TPanes = panes.find((v:any) => v.key === key) as TPanes;
        if(!info) {//相同路径不存在
            // console.log(title,'----')
            dispatch(addPanes({
                title,
                key,
                closable: true
            }))
        }
    },[key])
    return (
        <Content style={{margin: '5PX'}}>

            <div className="site-layout-background" style={{padding: 5, height:"100%"}}>
                <Tabs type="editable-card"
                      onChange={(activeKey)=>{
                          navigate(activeKey);
                      }}
                      activeKey={key}
                      onEdit={(actionKey,action )=>{
                          if(action === "remove"){
                              const index:number = panes.findIndex((item: any) => item.key === actionKey) as number;
                              dispatch(delPanes(index));
                              if (key === actionKey) {
                                  navigate(panes[index-1].key)
                              }
                              // setPanes(panes.filter((v:TPanes)=>v.key !== actionKey))
                              // const copyPanes = [...panes];
                              // const index:number = copyPanes.findIndex((v:TPanes)=>v.key === actionKey) as number;
                              // copyPanes.splice(index,1);
                              // setPanes(copyPanes);
                              //navigate(copyPanes[index-1].key)
                          }
                      }}>
                    {panes.map((pane: any) => (
                        <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
                            {/*{pane.content}*/}
                            <Outlet/>
                        </TabPane>
                    ))}
                </Tabs>

            </div>
        </Content>
    );
}

export default IndexContent;